<template>
  <div>
    <transition-group
      name="slide-fade" mode="out-in"
    >
      <div class="commission-center" key="main" v-show="!detailVisible">
        <current-progress
          :rest-days="commissionData.restDays"
          :dead-date="commissionData.deadDate"
          :total-days="commissionData.totalDays"
        ></current-progress>
        <div class="dashboard-center__row">
          <commission-statistics
            :amount="commissionData.thisMonth.amount"
            :last-amount="commissionData.lastMonth.amount"
            :percentage="commissionData.thisMonth.commRate"
            @refresh="doGet({action: 'commission'})"
            :style="{marginRight:'5px'}"
          ></commission-statistics>
          <user-table
            :api="latestRechargeApi"
            :show-recharge="true"
            title="最新存款会员"
          ></user-table>
          <div class="commission-center__info">
            <div class="commission-center__info-tab">
              <div class="commission-center__info-btn" @click="showDeposit = false" :class="showDeposit === false? 'active':''">最新存款会员</div>
              <div class="commission-center__info-btn" @click="showDeposit = true" :class="showDeposit? 'active':''">首次存款会员</div>
            </div>
            <user-table
            :api="firstRechargeListApi"
            :show-recharge="true"
            title="首次存款会员"
            type="detail"
            v-if="showDeposit"
            ></user-table>
          </div>
          <!--<user-table-->
            <!--:api="firstRechargeListApi"-->
            <!--:show-recharge="true"-->
            <!--title="首次存款会员"-->
            <!--type="detail"-->
          <!--&gt;</user-table>-->
          <user-table
            :api="latestRegisterApi"
            title="最新加入会员"
            width="small"
          ></user-table>
        </div>
        <div class="dashboard-center__row">
          <el-warning>系统定时每天凌晨1点更新一次当月代理佣金数据</el-warning>
        </div>
        <!--<div class="dashboard-center__row" v-if="commissionData.thisMonth.amount<0">-->
        <!--<el-warning>注：当公司净输赢为负数时候（会员盈利），佣金比例默认为100%</el-warning>-->
        <!--</div>-->
        <div class="dashboard-center__title">
          佣金概况
        </div>
        <div class="dashboard-center__row">
          <commission-detail :commission-data="commissionData"></commission-detail>
        </div>

        <div class="dashboard-center__row">
          <statistics-container
            title="资金概况"
            :api="funSummaryApi"
            :to="{name: 'home'}"
            :type="type"
            :show-nav="true"
            :nav="capitalNavList"
            :more="true"
            @open-detail="openDetail({detailName: 'capital-detail', props: {isDuration: true, type: 2}})"
          ></statistics-container>

          <statistics-container
            title="会员概况"
            :api="memberSummaryApi"
            :to="{name: 'home'}"
            :type="type"
            :nav="memberNavList"
            :more="true"
            @open-detail="openDetail({detailName: 'member-detail', props: {isDuration: true, type: 2}})"
          ></statistics-container>
        </div>

        <div class="dashboard-center__row commission-location-left">
          <div class="commission-tab">
            <div class="commission-btn" @click="showDivision = false" :class="showDivision === false? 'active':''">资金概况</div>
            <div class="commission-btn" @click="showDivision = true" :class="showDivision? 'active':''">上分概况</div>
          </div>
          <statistics-container
            title="上分概况"
            :api="upAmountSummaryApi"
            :to="{name: 'home'}"
            :type="type"
            :show-nav="true"
            :nav="divisionNavList"
            :more="true"
            @open-detail="openDetail({detailName: 'upamount-detail', props: {isDuration: true, type: 2, isNewReg: 0}})"
            v-if="showDivision"
          ></statistics-container>
        </div>
        <div class="dashboard-center__row commission-location-right">
          <div class="commission-tab">
            <div class="commission-btn" @click="showRegister = false" :class="showRegister === false? 'active':''">会员概况</div>
            <div class="commission-btn" @click="showRegister = true" :class="showRegister? 'active':''">新注册概况</div>
            <div class="commission-tab-tip">
              <el-popover
                  placement="bottom"
                  width="380"
                  :offset="100"
                  trigger="click">
                <div class="commission-tab-tip__tip">
                  <div class="commission-tab-tip__tip-content">
                    <div v-if="!showRegister">累计会员数：累计到本月/上月的会员总人数</div>
                    <div v-else>新会员数：本月/上月的新注册会员总人数</div>
                    <div>活跃会员数：活跃会员定义为“充值/提现/投注/参与活动”达到其中一个条件即为活跃会员</div>
                    <div>待活跃会员数：待活跃会员定义为“充值/提现/投注/参与活动”没有这4个条件即为待活跃会员</div>
                    <div>有效会员数：满足月有效投注金额和月有效投注单数的会员</div>
                    <div>登录会员数：登录过的会员</div>
                  </div>
                </div>
                <div class="commission-tab-tip__tip-icon" slot="reference">?</div>
              </el-popover>
            </div>
          </div>
          <statistics-container
            title="新注册概况"
            :api="memberSummaryApi"
            :to="{name: 'home'}"
            :type="type"
            :isNewReg="isNewReg"
            :nav="registerNavList"
            :more="true"
            @open-detail="openDetail({detailName: 'register-detail', props: {isDuration: true, type: 1, isNewReg: 1}})"
            v-if="showRegister"
          ></statistics-container>
        </div>
        <div class="dashboard-center__title">
          游戏数据汇总
          <custom-button-group v-model="day" class="float-right">
            <custom-button :label="1">
              本月
            </custom-button>
            <custom-button :label="2">
              上月
            </custom-button>
          </custom-button-group>
        </div>
        <div class="dashboard-center__row dashboard-center__row--win-lose">
          <win-lose :type="day"></win-lose>
        </div>
        <div class="dashboard-center__row">
          <win-lose-and-effect-betting
            :type="type"
          ></win-lose-and-effect-betting>
        </div>
      </div>
      <component
        key="detail"
        :is="detailName"
        :info="detailProps"
        v-if="detailVisible"
      ></component>
    </transition-group>
  </div>
</template>

<script>

  import CurrentProgress from './current-progress';
  import CommissionStatistics from "./commission-statistics";
  import CommissionDetail from "./commission-detail";
  import StatisticsContainer from "../components/statistics-container";
  import WinLose from "../components/win-lose";
  import WinLoseAndEffectBetting from "../components/win-lose-and-effect-betting";

  import MemberDetail from '../components/member-detail';
  import CapitalDetail from '../components/capital-detail';
  import UpamountDetail from '../components/upamount-detail';
  import RegisterDetail from '../components/register-detail';

  import UserTable from "./user-table";

  import {
    actUserByTimeApi,
    bettingAmountByTimeApi,
    commissionApi,
    effectUserByTimeApi,
    fundByTimeApi,
    funSummaryApi,
    upAmountSummaryApi,
    latestRechargeApi,
    latestRegisterApi,
    loginUserByTimeApi,
    memberByTimeApi,
    memberSummaryApi,
    upAmountByTimeApi,
    upAmountUserByTimeApi,
    totalUserByTimeApi,
    newUserByTimeApi,
    notActUserByTimeApi,
    rechargeByTimeApi,
    rechargeUserByTimeApi,
    withdrawByTimeApi,
    withdrawUserByTimeApi,
    firstRechargeListApi
  } from '@/services/api/home';

  import {getCommand, detailContent} from '@/build';
  import ElWarning from "@/components/el-warning/index";

  export default {

    name: "commission-center",

    mixins: [getCommand, detailContent],

    components: {
      ElWarning,
      MemberDetail,
      CapitalDetail,
      UpamountDetail,
      RegisterDetail,
      StatisticsContainer,
      UserTable,
      WinLose,
      CommissionStatistics,
      CommissionDetail,
      WinLoseAndEffectBetting,
      CurrentProgress,
    },

    data() {
      return {
        latestRegisterApi,
        latestRechargeApi,
        funSummaryApi,
        upAmountSummaryApi,
        memberSummaryApi,
        fundByTimeApi,
        memberByTimeApi,
        firstRechargeListApi,

        day: 1,
        type: 2,
        isNewReg:1,
        commissionData: {
          thisMonth: {
            cost: {}
          },
          lastMonth: {
            cost: {}
          },
        },
        latestRegister: {},
        latestRecharge: {},
        capitalNavList: [
          {
            title: "总存款额",
            prop: 'rechargeSumMoney',
            filter: 'currency',
            api: rechargeByTimeApi,
          },
          {
            title: "存款人数",
            prop: 'rechargeUniqueUser',
            api: rechargeUserByTimeApi,
          },
          {
            title: "总提款额",
            prop: 'withdrawSumMoney',
            filter: 'currency',
            api: withdrawByTimeApi,
          },
          {
            title: "提款人数",
            prop: 'withdrawUniqueUser',
            api: withdrawUserByTimeApi,
          },
          {
            title: "总投注额",
            prop: 'bettingSumMoney',
            filter: 'currency',
            api: bettingAmountByTimeApi,
          }
        ],
        divisionNavList: [
          {
            title: "总上分额",
            prop: 'upAmountSumMoney',
            // filter: 'currency',
            api: upAmountByTimeApi,
          },
          {
            title: "上分人数",
            prop: 'upAmountUniqueUser',
            api: upAmountUserByTimeApi,
          },
        ],
        memberNavList: [
          {
            title: "累计会员数",
            prop: 'totalUser',
            api: totalUserByTimeApi,
          },
          // {
          //   title: "新会员数",
          //   prop: 'newUserCnt',
          //   api: newUserByTimeApi,
          // },
          {
            title: "活跃会员数",
            prop: 'activeUserCnt',
            api: actUserByTimeApi,
          },
          {
            title: "待活跃会员数",
            prop: 'notActiveUser',
            api: notActUserByTimeApi,
          },
          {
            title: "有效会员数",
            prop: 'effectUserCnt',
            api: effectUserByTimeApi,
          },
          {
            title: "登录会员数",
            prop: 'loginUserCnt',
            api: loginUserByTimeApi,
          }
        ],
        registerNavList: [
          {
            title: "新会员数",
            prop: 'newUserCnt',
            api: newUserByTimeApi,
          },
          {
            title: "活跃会员数",
            prop: 'activeUserCnt',
            api: actUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "待活跃会员数",
            prop: 'notActiveUser',
            api: notActUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "有效会员数",
            prop: 'effectUserCnt',
            api: effectUserByTimeApi,
            isNewReg: 1,
          },
          {
            title: "登录会员数",
            prop: 'loginUserCnt',
            api: loginUserByTimeApi,
            isNewReg: 1,
          }
        ],
        showDivision: false,
        showRegister: false,
        showDeposit: false,
      };
    },
    watch: {},

    methods: {},
    mounted() {
      this.bindGet(commissionApi, 'commissionData', {
        action: 'commission',
        sendingData: 'filters',
      });

      this.getAll();
    },
  };
</script>
<style lang="scss">
  @include b(commission-center) {
    position: relative;
    @include e(info) {
      position: absolute;
      left: 293px;
      width: 230px;
      height: 16px;
      @include e(info-tab) {
        flex: 1 0 0;
        font-size: 12px;
        font-weight: bold;
        margin-top: 17px;
        margin-left: 15px;

        position: absolute;
        background: #fbfbfb !important;
        z-index: 1;
        @include e(info-btn) {
          float: left;
          cursor: pointer;
          color: $--color-info;
          &:first-child {
            padding-right: 10px;
            border-right: 3px solid $--color-primary;
          }
          &:last-child {
            padding-left: 10px;
          }
          &:active {
            color: $--color-black;
          }
        }
        .active {
          color: $--color-black;
        }
      }
      @include b(statistics-container) {
        width: 600px !important;
        flex: 0 0 100% !important;
      }
    }
    .commission-location-left {
      background: #ffffff;
      position: absolute;
      top: 580px;
      width: 600px;
      left: 0;
      .commission-tab {
        flex: 1 0 0;
        font-size:24px;
        font-weight: bold;
        margin-bottom: 15px;

        position: absolute;
        background: #ffffff;
        .commission-btn {
          float: left;
          cursor: pointer;
          color: $--color-info;
          &:first-child {
            padding-right: 20px;
            border-right: 3px solid $--color-primary;
          }
          &:last-child {
            padding-left: 20px;
          }
          &:active {
            color: $--color-black;
          }
        }
        .active {
          color: $--color-black;
        }
      }
      @include b(statistics-container) {
        width: 600px !important;
        flex: 0 0 100% !important;
      }
    }
    .commission-location-right {
      background: #ffffff;
      position: absolute;
      top: 580px;
      width: 600px;
      right: -20px;
      .commission-tab {
        flex: 1 0 0;
        font-size:24px;
        font-weight: bold;
        margin-bottom: 15px;

        position: absolute;
        background: #ffffff;
        .commission-btn {
          float: left;
          cursor: pointer;
          color: $--color-info;
          &:first-child {
            padding-right: 20px;
            border-right: 3px solid $--color-primary;
          }
          &:nth-child(2) {
            padding-left: 20px;
          }
          &:active {
            color: $--color-black;
          }
        }
        .active {
          color: $--color-black;
        }
      }
      @include b(statistics-container) {
        width: 600px !important;
        flex: 0 0 100% !important;
      }
      @include b(commission-tab-tip){
        display: inline-block;
        margin-left: 15px;
        @include e(tip-icon) {
          width: 24px;
          height: 24px;
          background: rgba(243, 243, 243, 1);
          color: $--color-black-4;
          font-size: $--font-size-x-large;
          border-radius: $--border-radius-circle;
          text-align: center;
          line-height: 24px;
          display: inline-block;
          cursor: pointer;
          vertical-align: top;
          margin-top: 4px;
        }
        @include e(tip) {
          padding: 10px 8px;
          box-sizing: border-box;
        }
        @include e(tip-title) {
          font-size: $--font-size-small;
          font-weight: bold;
          margin-bottom: 4px;
        }
        @include e(tip-content) {
          font-size: $--font-size-small;
          line-height: 22px;
          margin-bottom: 12px;

          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
    .statistics-container {
      width: 600px;
      flex: 0 0 100%;
    }

    @include b(statistics-container) {
      width: 600px;
    }
  }
</style>
